
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>
远程Grub
</title>
<!--
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-->
<link rel="stylesheet" href="element/w3.css">
<meta charset="utf-8">
<style>
div {
    margin-left: 100px;
}
</style>
</head>

<body onload="get_clients()">
<h1>Remote Grub Setting</h1>

<!--
<p id="foo"></p>
-->

<div class="w3-container" id="content" >
    <!--
    <ul class="w3-ul" id="myul">
    </ul>
    -->
</div>

<div class="w3-container" id="content_menu" >
    <p id="client_name"></p>
    <!--
    <ul class="w3-ul" id="myul">
    </ul>
    -->
</div>

<script>
function getEventTarget(e) {
        e = e || window.event;
        return e.target || e.srcElement; 
}

var ul_menu = document.getElementById("content_menu");
ul_menu.onclick = function(event) {
        var target = getEventTarget(event);
        if(target.nodeName === 'UL' || target.nodeName === 'DIV')
            return;
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {

        }
        xhttp.open("GET", "rgrub_set", true);
        xhttp.setRequestHeader("Grub-Set", target.innerHTML);
        xhttp.setRequestHeader("Client-Name", document.getElementById("client_name").innerHTML);
        xhttp.send();
        //document.getElementById("content_menu").innerHTML = ""; 
        //get_clients();
        window.location.reload(true);
}

var ul = document.getElementById("content");
ul.onclick = function(event) {
        var target = getEventTarget(event);
        if(target.nodeName === 'UL' || target.nodeName === 'DIV')
            return;
        //alert(target.innerHTML);
        //alert(target.nodeName);
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            var text="";
            if(this.readyState == 4 && this.status == 200) {
                //document.getElementById("foo").innerHTML = this.responseText;
                var obj = JSON.parse(this.responseText);
                //text += "<p>" +  target.innerHTML + "</p>";
                text += '<ul class="w3-ul" id="myul">';
                for(i in obj.menuentry) {
                    text += '<li class="w3-hover-blue">' + obj.menuentry[i].title + '</li>' + "<br>";
                }
                text += "<ul>";
                document.getElementById("client_name").innerHTML = target.innerHTML;
                document.getElementById("content").innerHTML = "";
                document.getElementById("content_menu").innerHTML += text; 
            }
        }
        xhttp.open("GET", "rgrub_set", true);
        xhttp.setRequestHeader("Get-Client", target.innerHTML);
        xhttp.send();
}

function get_clients() {
        //alert("Page is loaded");
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                        //document.getElementById("foo").innerHTML = this.responseText;
                        var obj = JSON.parse(this.responseText);
                        var text = ""; 
                        text += '<ul class="w3-ul" id="myul">';
                        for(i in obj.client_list) {
                            text += '<li class="w3-hover-green">' + obj.client_list[i].name + '</li>' + "<br>";
                        }
                        text += "<ul>";
                        document.getElementById("content").innerHTML = text;
                }
        }
        xhttp.open("GET", "rgrub_set", true);
        xhttp.setRequestHeader("Get-Client", "client_list");
        xhttp.send();
}

</script>

</body>
</html>
